<template>
	<view>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="list" :show="fail"></u-empty>
		</view>
		<block v-else>
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="upper">
					<view class="time">{{item.addTime}}</view>
				</view>
				<view class="lower">
					<view class="">
						<view class="">提现类型</view>
						<view class="">{{item.cashTypeDesc}}</view>
					</view>
					<view class="">
						<view class="">提现金额</view>
						<view class="">￥{{item.cashFee}}</view>
					</view>
					<view class="">
						<view class="">提现状态</view>
						<view class="">{{status(item.cashStatus)}}</view>
					</view>
				</view>
			</view>
			<u-gap></u-gap>
			<u-loadmore :status="loadingStatus"></u-loadmore>
			<u-gap></u-gap>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				loadingStatus: 'loading',
				loading: true,
				fail: false,
			};
		},
		onLoad() {
			this.pageNo = 1
			this.getList(res => {
				this.loading = false
				if (res == '') {
					this.fail = true
					return
				}
				this.loadingStatus = res.length < 10 ? 'nomore' : 'loadmore'
				this.list = res
			})
		},
		onReachBottom() {
			if (this.loadingStatus == 'loading' || this.loadingStatus == 'nomore') return
			this.pageNo++
			this.loadingStatus = 'loading'
			this.getList(res => {
				if (res == '') {
					this.loadingStatus = 'nomore'
					return
				}
				this.list = this.list.concat(res)
				this.loadingStatus = 'loadmore'
			})
		},
		methods: {
			getList(callback) {
				this.$u.post('orderformcash/list', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					callback(res.list)
				}).catch(error => {
					this.loading = false
					this.fail = true
				})
			},
			status(status) {
				switch (status) {
					case 0:
						return '已驳回'
						break
					case 10:
						return '申请中'
						break
					case 20:
						return '审核中'
						break
					case 30:
						return '已提现'
						break
				}
			}
		}
	}
</script>

<style lang="scss">
	.loading {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item {
		.upper {
			text-align: center;
			padding: 20rpx;
		}

		.lower {
			background-color: #FFFFFF;
			margin: 0 30rpx;
			border-radius: 20rpx;

			>view {
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				margin: 0 30rpx;
				border-bottom: 1rpx solid #E1E1E1;

				&:last-child {
					border-bottom: none;
				}
			}
		}

		.time {
			font-size: 24rpx;
			color: #AAAAAA;
			padding: 5rpx 20rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			display: inline-block;
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
